import React,{useState,useEffect} from 'react'
import {Form,DatePicker,Input,Collapse,Space,Button} from 'antd'
import ChooseList from '../components/chooseList'
import { ConsoleSqlOutlined, MinusCircleOutlined,PlusOutlined } from '@ant-design/icons';
import moment from "moment";
export default function apply(props:any) {
    const [formData,setFormData]:any = useState({})
    const [chooseList,setChooseList] = useState([])
    const [form] = Form.useForm()
    const { Panel } = Collapse;
    const {RangePicker} = DatePicker
    const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
    }
    const activityList = [
        {
          value:1,
          label:'姓名'
        },
        {
          value:2,
          label:'性别'
        },
        {
          value:3,
          label:'图片'
        },
        {
          value:4,
          label:'手机号'
        },
        {
          value:5,
          label:'生日'
        },
        {
            value:6,
            label:'QQ号'
        },
        {
            value:7,
            label:'邮箱'
          },
          {
            value:8,
            label:'学院'
          },
          {
            value:9,
            label:'年级'
          },
          {
            value:10,
            label:'班级'
          },
          {
            value:11,
            label:'学号'
          },
          {
            value:12,
            label:'特长'
          },
          {
            value:13,
            label:'备注'
          }
    ]
    useEffect(()=>{
      if(props.formData.activityBasicId){
          let items = props.formData.activityVOS.filter((res:any) =>res.activityType === 1)
        setFormData({...items[0]})
      } else {
        setFormData(props.formData)
      }
    },[props.formData])
    useEffect(()=>{

      if(formData.activityType !== undefined){
        let time = []
        time.push(moment(formData.startDate))
        time.push(moment(formData.endDate))
        console.log('报名的时间',time,formData,moment(formData.startDate),moment(formData.endDate))
        let arr = [...formData.requiredEntryForms]
        let numberList = []
        for(let item in arr){
          let haveItem = activityList.filter((t:Object) =>t.value == arr[item].value)
          if(haveItem.length==0){
            haveItem = activityList.filter((t:Object) =>t.label == arr[item].key)
          }
          if(haveItem.length==0){
            haveItem = activityList.filter((t:Object) =>t.label == arr[item].value)
          }
          numberList.push(haveItem.length?haveItem[0].value:'')
          
        }
        form.setFieldsValue({
          activityTime:time,
          numberLimit:formData.numberLimit,
          requiredEntryForms:[...formData.requiredEntryForms],
          optionalEntryForms:formData.optionalEntryForms?formData.optionalEntryForms : []
        })
        setChooseList(numberList)
      }
    },[formData])
    useEffect(()=>{
      form.validateFields().then(res =>{
        if(props.form == true){
          let obj = {
            ...form.getFieldsValue(true),
            activityType:1
          }
          obj.startDate = obj.activityTime[0].format('YYYY-MM-DD hh:mm:ss')
          obj.endDate = obj.activityTime[1].format('YYYY-MM-DD hh:mm:ss')
          if(obj.requiredEntryForms && obj.requiredEntryForms[0].key == undefined){
            for(let item in obj.requiredEntryForms){
              let newObj = activityList.filter(t=>t.value == obj.requiredEntryForms[item])
              let needObj = {
                  key:newObj[0].label,
                  value:''
              }
              obj.requiredEntryForms[item] = needObj
            }
          }
          
          if(obj.optionalEntryForms){
            for(let value in obj.optionalEntryForms){
              let newObj = {
                ...obj.optionalEntryForms[value],
                value:''
              }
              obj.optionalEntryForms[value] = newObj
            }
          }
          let toDataObj = {
            activityType:1,
            startDate:obj.startDate,
            endDate:obj.endDate,
            numberLimit:obj.numberLimit,
            requiredEntryForms:obj.requiredEntryForms,
            optionalEntryForms:obj.optionalEntryForms
          }
          props.applyForm(toDataObj)
        }
      })
     
    },[props.form])
    function chooseModel(list:any){
      form.setFieldsValue({'requiredEntryForms':list})
    }
  return (
    <div>
          <Collapse  collapsible="header" defaultActiveKey={['1']}>
              <Panel header='报名' key="1">
                <Form
                        form={form}
                        name="validate_other"
                        layout="horizontal"
                        {...formItemLayout}
                    >
                        <Form.Item
                        >
                            <span>基本信息</span>
                                <Form.Item
                                    name="activityTime"
                                    label="活动时间"
                                    rules={[{ required: true }]}
                                >
                                    <RangePicker/>
                                </Form.Item>
                                <Form.Item
                                    name="numberLimit"
                                    label="报名人数"
                                    rules={[{ required: true,message:'请填入报名人数' }]}
                                >
                                    <Input type="number" placeholder='不填即无限制'/>
                                </Form.Item>
                        </Form.Item>
                        <Form.Item
                          name="requiredEntryForms"
                        >
                            <span>选择您希望活动参加者必须填写的信息</span>
                               <ChooseList list={activityList} chooseData={chooseList} chooseModel={chooseModel} size="small"></ChooseList>
                        </Form.Item>
                        <Form.Item
                        >
                            <span>可添加补充项目</span>
                            <Form.List name="optionalEntryForms">
                                {(fields, { add, remove }) => (
                                    <>
                                    {fields.map(({ key, name, ...restField }) => (
                                        <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                                        <Form.Item
                                            label="名称"
                                            {...restField}
                                            name={[name, 'key']}
                                            rules={[{ required: true, message: '请输入补充名称' }]}
                                        >
                                            <Input placeholder="请输入补充名称，如爱好" />
                                        </Form.Item>
                                        <MinusCircleOutlined onClick={() => remove(name)} />
                                        </Space>
                                    ))}
                                    <Form.Item>
                                        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                        添加
                                        </Button>
                                    </Form.Item>
                                    </>
                                )}
                            </Form.List>
                        </Form.Item>
                    </Form>
              </Panel>
           </Collapse>
    </div>
  )
}
